<template>
    <div>
<!--      {{timeAll}}{{allTime}}-->
        <div id="AddVisits"></div>
    </div>
</template>

<script>
 import $ from 'jquery';
 import dataTime from '../../assets/dataTime.js'
    window.jQuery = $;
    window.$ = $;
    import Highcharts from 'highcharts/highstock';



    export default {
      name: "AddVisits",
      data(){
        let data = dataTime.data
        return{
          data: data,
          allTime: {},
          // timeAll:[]
        }
      },
      //调用绘制图表方法
      mounted() {
        this.moreChart();
        this.initTime();
      },

      methods: {
        initTime() {
          this.getRequest('/alltime').then(resp => {
            if (resp) {
              this.allTime=resp;
              // for (var i=0;i<this.allTime.length;i++){ //提取所需值组成新数组
              //   this.timeAll.push([this.allTime[i].key]);
              // }

            }
          })
        },
        moreChart() {
          if (this.chart) {
            this.chart.destroy();
          }
          //下面右边的注释必须加上不然会报错
          var chart = null; // eslint-disable-line no-unused-vars
//
          //http://45q6c23894.qicp.vip/alltime
          //请求数据
          // $.getJSON('https://data.jianshukeji.com/jsonp?filename=json/usdeur.json&callback=?', function (data) {
            chart = Highcharts.chart('AddVisits', { //构造函数绑定容器
              chart: {
                zoomType: 'x' //定义图表水平缩放
              },
              title: { //定义主标题
                text: 'SQ-短链接访问量走势图'
              },
              subtitle: { //定义副标题
                text: document.ontouchstart === undefined ?
                    '鼠标拖动可以进行缩放噢~' : '手势操作进行缩放'
              },
              xAxis: {  //x轴
                type: 'datetime',
                dateTimeLabelFormats: {
                  millisecond: '%H:%M:%S.%L',
                  second: '%H:%M:%S',
                  minute: '%H:%M',
                  hour: '%H:%M',
                  day: '%m-%d',
                  week: '%m-%d',
                  month: '%Y-%m',
                  year: '%Y'
                }
              },
              tooltip: { // 数据提示框,鼠标停在坐标轴上的点能显示数据
                dateTimeLabelFormats: {
                  millisecond: '%H:%M:%S.%L',
                  second: '%H:%M:%S',
                  minute: '%H:%M',
                  hour: '%H:%M',
                  day: '%Y-%m-%d',
                  week: '%m-%d',
                  month: '%Y-%m',
                  year: '%Y'
                }
              },
              yAxis: { //y轴
                title: {
                  text: '访问量'
                }
              },
              legend: { //图例,是图表中用不同形状、颜色、文字等 标示不同数据列，通过点击标示可以显示或隐藏该数据列,这里未定义
                enabled: false
              },
              plotOptions: { //数据列通用配置
                area: {
                  fillColor: {
                    linearGradient: { //设置渐变颜色， (x1, y1) 为起始点，(x2, y2) 结束点，其中 (0, 0) 点为图形的左上角，(1, 1) 为图形的右下角
                      x1: 0,
                      y1: 0,
                      x2: 0,
                      y2: 1
                    },
                    stops: [
                      [0, new Highcharts.getOptions().colors[0]],
                      [1, new Highcharts.Color(Highcharts.getOptions().colors[0]).setOpacity(0).get('rgba')]
                    ]
                  },
                  marker: {
                    radius: 2 //指定数据点大小
                  },
                  lineWidth: 1, //指定数据线宽
                  states: {
                    hover: {  // 鼠标经过数据点样式配置
                      lineWidth: 1
                    }
                  },
                  threshold: null
                }
              },
              series: [{ //数据列,即图表上一个或多个数据系列，比如曲线图中的一条曲线，柱状图中的一个柱形。
                type: 'area',
                name: '今日访问量',
                data: this.data
              }],
              credits: {
                enabled: false     //不显示LOGO
              }
            });
          // });


        }
      }
    };

    //图表主题配置
 Highcharts.theme = {
     colors: "#f45b5b #8085e9 #8d4654 #7798BF #aaeeee #ff0066 #eeaaee #55BF3B #DF5353 #7798BF #aaeeee".split(" "),
     chart: {backgroundColor: null, style: {fontFamily: "Signika, serif"}},
     title: {style: {color: "black", fontSize: "16px", fontWeight: "bold"}},
     subtitle: {style: {color: "black"}},
     tooltip: {borderWidth: 0},
     labels: {style: {color: "#6e6e70"}},
     legend: {backgroundColor: "#E0E0E8", itemStyle: {fontWeight: "bold", fontSize: "13px"}},
     xAxis: {labels: {style: {color: "#6e6e70"}}},
     yAxis: {labels: {style: {color: "#6e6e70"}}},
     plotOptions: {series: {shadow: !0}, candlestick: {lineColor: "#404048"}, map: {shadow: !1}},
     navigator: {xAxis: {gridLineColor: "#D0D0D8"}},
     rangeSelector: {
         buttonTheme: {
             fill: "white",
             stroke: "#C0C0C8",
             "stroke-width": 1,
             states: {select: {fill: "#D0D0D8"}}
         }
     },
     scrollbar: {trackBorderColor: "#C0C0C8"}
 };
 Highcharts.setOptions(Highcharts.theme);
</script>


<style scoped>


</style>